<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
</head>
<body>
<div id="app" style="op">
<p v-if="isOk">表白成功</p>
<p v-else>表白失败</p>
    <p v-show="isOk">求婚成功</p>
    <p v-show="!isOk">求婚失败</p>
    <button @click="isOk=!isOk">点击反转</button>
<!--
    v-if和v-show都可以达到条件渲染的效果,但是他们的是有很大区别的,后期两个用的都比较多,
    v-if条件渲染的时候,条件为真被渲染,条件为假 不渲染,其实条件为假的元素根本不存在dom上(内存中没有)
    v-show条件渲染的时候,条件为真被渲染,条件为假 不渲染 但是它是真实在dom上存在
            只是采用样式display:none去做的切换()内存中有
    切换的频率高 用 v-show
    切换频率不高 用v-if
    隐藏:display:none
        visibility:hidden
        opacity:0
        transform:-2000
        translateX:-2000
        height:0
    -->
</div>
<script src="js/vue.js"></script>
<script>
    const  vm=new Vue({
        el:"#app",
        data(){
            return {
                isOk:true,
            }
        },
    });
</script>
</body>
</html>